<template>
    
    <sc-drawer
        ref="drawerRef"
        @close="closeDrawer"
        class="bg-page"
        size="70%"
        v-bind="props"
        :isEditOption="isEditOption"
        :title="`客户: ${formData.crmLogisticsAdmin?.name}`"
    >
        
        <el-scrollbar>
            <el-form ref="formRef" class="pl-3" :model="formData" label-width="110px" inline>
                
                <el-card class="!border-none flex flex-col" shadow="never">
                    <div class="flex justify-between items-center p-4">
                        <el-tabs class="flex items-center" tab-position="left">
                            <el-tab-pane class="text-2xl font-medium" disabled>客户详情</el-tab-pane>
                        </el-tabs>
                        <el-button type="primary" @click="handleCreateFeedbackRecord">
                            <template #icon>
                                <icon name="el-icon-Plus"/>
                            </template>
                            联系人反馈
                        </el-button>
                    </div>
                </el-card>
                
                
                <!--  公司信息-->
                <el-card class="!border-none flex flex-1  justify-center items-center" shadow="never">
                    <div class=" text-lg	 mb-4">
                        公司信息
                    </div>
                    
                    <div class=" w-[800px]  ">
                        <div class="pl-3 grid grid-cols-2 gap-0">
                            <div>
                                <el-form-item label="公司名称 :">
                                    <p class="text-tx-regular">
                                        {{ formData.crmCorporation?.companyName }}
                                    </p>
                                
                                </el-form-item>
                            </div>
                            
                            
                            <div>
                                <el-form-item label="公司电话 :">
                                    <p class="text-tx-regular">
                                        {{ formData.crmCorporation?.companyPhone }}
                                    </p>
                                
                                </el-form-item>
                            </div>
                            
                            
                            <div>
                                <el-form-item label="公司法人 :">
                                    <p class="text-tx-regular">
                                        {{ formData.crmCorporation?.legalPersonName }}
                                    </p>
                                </el-form-item>
                            </div>
                            
                            
                            <div>
                                <el-form-item label="公司地址 :">
                                    <p class="text-tx-regular">
                                        {{ formData.crmCorporation?.fullAddress }}
                                    </p>
                                </el-form-item>
                            </div>
                        
                        </div>
                    
                    </div>
                </el-card>
                
                
                <el-card class="!border-none flex flex-1 items-center justify-center " shadow="never">
                    <div class=" text-lg	 mb-4">基本信息</div>
                    <div class=" w-[800px] ">
                        
                        <div class="pl-3  grid grid-cols-2 gap-0">
                            <div>
                                <el-form-item label="姓名 :">
                                    <p class="text-tx-regular">
                                        {{ formData.crmLogisticsAdmin?.name }}
                                    </p>
                                
                                </el-form-item>
                            </div>
                            
                            <div>
                                <el-form-item label="电话 :">
                                    <p class="text-tx-regular">
                                        {{ formData.crmLogisticsAdmin?.phone }}
                                    </p>
                                </el-form-item>
                            </div>
                            
                            
                            <div>
                                <el-form-item label="部门 :">
                                    <p class="text-tx-regular">
                                        {{ formData.crmLogisticsAdmin?.department }}
                                    </p>
                                </el-form-item>
                            </div>
                            
                            <div>
                                <el-form-item label="职位 :" prop="reason">
                                    <p class="text-tx-regular">
                                        {{ formData.crmLogisticsAdmin?.position }}
                                    </p>
                                </el-form-item>
                            </div>
                            
                            <div>
                                <el-form-item label="子女情况 :">
                                    <p class="text-tx-regular">
                                        {{ formData.crmLogisticsAdmin?.childrenSituation }}
                                    </p>
                                </el-form-item>
                            </div>
                        
                        </div>
                    
                    </div>
                </el-card>
                
                
                <el-card class="!border-none flex flex-1 items-center justify-center " shadow="never">
                    <div class=" text-lg	 mb-4">中间人信息</div>
                    
                    <div class=" w-[800px]  pl-8">
                        <div class="pl-3  grid grid-cols-2 gap-0">
                            <div>
                                <el-form-item label="姓名 :">
                                    <p class="text-tx-regular">
                                    
                                    </p>
                                
                                
                                </el-form-item>
                            </div>
                            
                            <div>
                                <el-form-item label="电话 :">
                                    <p class="text-tx-regular">
                                    
                                    </p>
                                </el-form-item>
                            </div>
                        
                        </div>
                    
                    </div>
                </el-card>
                
                <el-card class="!border-none flex flex-1 items-center justify-center " shadow="never">
                    <div class=" text-lg	 mb-4">地址信息</div>
                    
                    <div class=" w-[800px]  pl-8">
                        <div class="pl-3  grid grid-cols-2 gap-0">
                            <div>
                                <el-form-item label="发出物流公司 :">
                                    <p class="text-tx-regular">
                                    </p>
                                
                                
                                </el-form-item>
                            </div>
                            
                            <div>
                                <el-form-item label="发出物流单号 :">
                                    <p class="text-tx-regular">
                                    </p>
                                </el-form-item>
                            </div>
                        
                        </div>
                    
                    </div>
                </el-card>
                
                
                <el-card class="!border-none mt-2  " shadow="never">
                    <el-card class="!border-none   mt-4 " shadow="never">
                        <div class="flex ">
                            <el-tabs class="flex flex-1 items-center" tab-position="left">
                                <el-tab-pane class="text-2xl font-medium" disabled>跟踪记录</el-tab-pane>
                            </el-tabs>
                            
                            
                            <el-button
                                v-show="!isExpansionRecord"
                                @click="isExpansionRecord = !isExpansionRecord"
                                type="primary"
                                link>
                                展开
                            </el-button>
                            
                            <el-button
                                v-show="isExpansionRecord"
                                @click="isExpansionRecord = !isExpansionRecord"
                                type="primary"
                                link
                            >
                                收起
                            </el-button>
                        </div>
                    </el-card>
                    
                    <el-card class="!border-none " shadow="never" v-if="isExpansionRecord">
                        <div class="ml-8 mt-1">
                            <el-timeline>
                                <el-timeline-item v-for="item in formData.crmFeedbackRecords"
                                                  :timestamp="item?.createTime" placement="top">
                                    <el-card>
                                        <h4>{{ item.description }}</h4>
                                        <div class="flex justify-end">
                                            <p>{{ item.optPerson }} : {{ item.createTime }}</p>
                                        </div>
                                    </el-card>
                                </el-timeline-item>
                            
                            </el-timeline>
                        </div>
                    </el-card>
                </el-card>
            
            </el-form>
        </el-scrollbar>
    
    
    </sc-drawer>

</template>

<script lang='ts' setup>
import {useAfterSaleEnumManager} from "@/manager/base/AfterSaleEnumManager";
import {UnwrapNestedRefs} from "@vue/reactivity";

import {useFormatterManager} from "@/manager/base/FormatterManager";
import AfterSaleStatusInfoDTO from "@/api/afterSale/order/dto/AfterSaleStatusInfoDTO";

import {addLogisticsAdminFeedBack, getLogisticsAdminInfo} from "@/api/logistics/CrmLogisticsAdminController";
import CrmLogisticsAdminInfoDTO from "@/api/logistics/dto/CrmLogisticsAdminInfoDTO";
import feedback from "@/utils/feedback";
import CrmLogisticsAdminRequest from "@/api/logistics/request/CrmLogisticsAdminRequest";

let afterSaleOrderConfig = useAfterSaleEnumManager();
let formatterManager = useFormatterManager(afterSaleOrderConfig);
const isExpansionRecord = ref(true)
const drawerRef = shallowRef()

interface DetailProps {
    isEditOption?: boolean
    confirmText?: string
    
}

const props = withDefaults(defineProps<DetailProps>(), {
    isEditOption: false,
    confirmText: '确定'
    
})


let afterSaleOrderStatus: AfterSaleStatusInfoDTO = reactive(new AfterSaleStatusInfoDTO())


function handleCreateFeedbackRecord() {
    feedback.prompt("请简单描述电话", "反馈信息").then(item => {
        const crmLogisticsAdminRequest = new CrmLogisticsAdminRequest();
        crmLogisticsAdminRequest.description = item.value?.trim()
        
        if (formData.crmLogisticsAdmin?.id != undefined)
            crmLogisticsAdminRequest.id = formData.crmLogisticsAdmin?.id
        
        addLogisticsAdminFeedBack(crmLogisticsAdminRequest).then(async () => {
            await getLogisticsAdminInfo({id: formData.crmLogisticsAdmin?.id}).then(spoons => {
                Object.assign(formData, spoons)
            })
            feedback.notifySuccess("添加反馈记录成功")
        })
    });
}


let formData: UnwrapNestedRefs<CrmLogisticsAdminInfoDTO> = reactive(new CrmLogisticsAdminInfoDTO())

async function open(id: number) {
    await getLogisticsAdminInfo({id}).then(spoons => {
        Object.assign(formData, spoons)
    })
    drawerRef.value.open()
}


function closeDrawer() {
    emit('close')
}


/**
 * 关闭当前Drawer
 */
function close() {
    drawerRef.value.close()
}


const emit = defineEmits(['close'])

defineExpose({
    open,
    close
})

</script>

